<template>
  <div class="account-container br-20">
    <div class="top">
      <h4>賬號管理中心</h4>
      <div class="account-center br-10">
        <div class="account-center-top">
          <h5>多帳戶管理</h5>
          <el-button type="primary">
            <svg-icon icon-class="staff-add"></svg-icon>
            添加新帳號
          </el-button>
        </div>
        <div class="account-center-item">
          <div v-for="item in 3" :key="item" class="br-15">
            <svg-icon icon-class="awatar"></svg-icon>
            <div class="name" :class="item === 1 ? 'active' : ''">{{ item === 1 ? '張三（當前）' : '張三' }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="center">
      <div class="delete">
        <h4>歷史登入帳號清理</h4>
        <div>
          <el-button type="danger">批量刪除</el-button>
        </div>
      </div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="賬號名">
          <template>
            <div class="awatar-info-wrap">
              <svg-icon icon-class="awatar"></svg-icon>
              <div>張三</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="最後登入時間">
          <template>
            <span>2025-08-20</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template>
            <el-button type="text" size="small">刪除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="current-account-wrap">
      <h4>當前賬號信息</h4>
      <div class="current-account br-20">
        <div class="left">
          <svg-icon class="awatar" icon-class="staff-list-awatar"></svg-icon>
          <div class="change-awatar br-15">
            <svg-icon icon-class="change-awatar"></svg-icon>
            更換頭像
          </div>
        </div>
        <div class="right">
          <div class="item base br-15">
            <div class="head">
              <div>基礎資訊</div>
              <div>
                <el-button type="text">
                  <svg-icon icon-class="edit-blue"></svg-icon>
                  編輯個人資訊
                </el-button>
              </div>
            </div>
            <div class="list">
              <p>
                <span>姓名：</span>
                <span>張三</span>
              </p>
              <p>
                <span>工號：</span>
                <span>E12345</span>
              </p>
              <p>
                <span>賬號ID：</span>
                <span>E12345</span>
              </p>
              <p>
                <span>所屬部門：</span>
                <span>研發部</span>
              </p>
            </div>
          </div>
          <div class="item permission br-15">
            <div class="head">
              <div>權限概覽</div>
              <div>
                <el-button type="text">
                  <!-- UI並未上傳 -->
                  <svg-icon icon-class="edit-blue"></svg-icon>
                  管理權限
                </el-button>
              </div>
            </div>
            <div class="list">
              <p>
                <span>角色：</span>
                <span>管理員</span>
              </p>
              <p>
                <span>可訪問：</span>
                <span>項目管理、文檔編輯、數據分析</span>
              </p>
            </div>
          </div>
          <div class="item history br-15">
            <div class="head">
              <div>基礎信息</div>
              <div>
                <el-button type="text">
                  <!-- UI並未上傳 -->
                  <svg-icon icon-class="edit-blue"></svg-icon>
                  查看登入歷史
                </el-button>
              </div>
            </div>
            <div class="list">
              <p>
                <span>當前設備：</span>
                <span>PC端</span>
              </p>
              <p>
                <span>最後登錄設備：</span>
                <span>手機端</span>
              </p>
              <p>
                <span>最後登入時間：</span>
                <span>2025-07-28</span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="pay-info-wrap">
      <div class="pay-info-top">
        <h4>公司付款資訊</h4>
        <div>
          <el-button type="primary">
            <svg-icon icon-class="edit-white"></svg-icon>
            編輯付款信息
          </el-button>
        </div>
      </div>
      <div class="pay-info">
        <div class="pay-info-item br-10">
          <div class="pay-info-item-head">
            <h5>對公賬戶信息</h5>
            <div>
              <el-button type="text">
                <svg-icon icon-class="copy"></svg-icon>
                複製賬號資訊
              </el-button>
            </div>
          </div>
          <div class="pay-info-item-list">
            <p>
              <span>賬戶名稱：</span>
              <span>xx公司對公帳戶</span>
            </p>
            <p>
              <span>開戶行：</span>
              <span>招商銀行xx支行</span>
            </p>
            <p>
              <span>賬戶號：</span>
              <span>1234 55590 9808 3456</span>
            </p>
          </div>
        </div>
        <div class="pay-info-item br-10">
          <div class="pay-info-item-head">
            <h5>發票抬頭信息</h5>
            <div>
              <el-button type="text">
                <svg-icon icon-class="copy"></svg-icon>
                複製發票資訊
              </el-button>
            </div>
          </div>
          <div class="pay-info-item-list">
            <p>
              <span>賬戶名稱：</span>
              <span>xx公司對公帳戶</span>
            </p>
            <p>
              <span>稅號：</span>
              <span>9878 7898 89887665</span>
            </p>
            <p>
              <span>地址電話：</span>
              <span>北京市海淀區XX大廈</span>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'account-management',
  data() {
    return {
      tableData: [{}]
    }
  }
}
</script>

<style scoped lang="less">
.account-container {
  background: #fff;
  padding: 25px 30px;
  h4 {
    font-size: 18px;
    line-height: 25px;
    margin: 0;
  }
  > .top {
    margin-bottom: 24px;
    h4 {
      margin-bottom: 18px;
    }
    .account-center {
      background: rgba(60, 88, 252, 0.02);
      padding: 18px 25px 27px;
      &-top {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        align-items: center;
        h5 {
          font-size: 18px;
          line-height: 25px;
          font-weight: normal;
          margin: 0;
        }
      }
      &-item {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        > div {
          margin-right: 22px;
          padding: 10px 18px;
          background: #fff;
          display: flex;
          justify-content: flex-start;
          flex-wrap: wrap;
          align-items: center;
          //min-width: 211px;
          height: 70px;
          .svg-icon {
            font-size: 50px;
            margin-right: 26px;
          }
          .name {
            font-size: 18px;
            line-height: 25px;
            color: #000;
            &.active {
              color: #3c58fc;
            }
          }
        }
      }
    }
  }
  .center {
    .delete {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 17px;
      > h4 {
        align-content: center;
      }
    }
    .el-table {
      margin-bottom: 20px;
      .awatar-info-wrap {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        align-items: center;
        .svg-icon {
          font-size: 39px;
          margin-right: 10px;
        }
      }
    }
  }
  .current-account-wrap {
    margin-bottom: 15px;
    h4 {
      margin-bottom: 20px;
    }
    .current-account {
      background: rgba(60, 88, 252, 0.02);
      padding: 25px 30px;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      .left {
        padding: 24px 26px;
        text-align: center;
        .awatar {
          font-size: 84px;
          margin: 0 auto 35px;
        }
        .change-awatar {
          flex: none;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 16px;
          line-height: 22px;
          color: #3c58fc;
          background: rgba(60, 88, 252, 0.16);
          padding: 7px 45px;
          cursor: pointer;
          .svg-icon {
            font-size: 23px;
            margin-right: 7px;
          }
        }
      }
      .right {
        display: flex;
        justify-content: flex-start;
        margin-left: 18px;
        flex-wrap: wrap;
        .item {
          width: 240px;
          //flex: auto;
          margin-right: 42px;
          background: #fff;
          padding: 13px 19px;
          .head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
            .svg-icon {
              font-size: 18px;
              vertical-align: middle;
            }
            > div {
              font-size: 16px;
              line-height: 22px;
              font-weight: bold;
            }
          }
          .list {
            p {
              font-size: 16px;
              line-height: 22px;
              margin: 0 0 13px;
            }
          }
        }
      }
    }
  }
  .pay-info-wrap {
    .pay-info-top {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-bottom: 24px;
    }
    .pay-info {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      &-item {
        background: rgba(60, 88, 252, 0.02);
        padding: 27px 32px;
        margin-right: 20px;
        //min-width: 578px;
        flex: auto;
        &:last-child {
          margin-right: 0;
        }
        &-head {
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          align-items: center;
          h5 {
            margin: 0;
          }
          .svg-icon {
            font-size: 20px;
            vertical-align: middle;
            margin-right: 10px;
          }
        }
        &-list {
          p {
            font-size: 16px;
            line-height: 22px;
            margin: 0 0 15px 0;
          }
        }
      }
    }
  }
}
</style>
